<template>
    <div class="home" id="maxBoxId">
        <el-container>
            <el-aside :width="getToggle ? '5rem' : '20rem'">
                <AppMenu menuTitle="野生白嫖怪"></AppMenu>
            </el-aside>
            <el-container>
                <el-header height="5.83rem"
                    ><AppHeader
                        @show-communication="showCommunication"
                    ></AppHeader
                ></el-header>
                <el-main>
                    <!-- <MenuTabs :tabsItem="tabsList" :activeTab="activeTab"></MenuTabs> -->
                    <TabsMenu></TabsMenu>

                    <div v-show="theCommunicationPage" class="min-window-page">
                        <div class="min-window-page-headmove" v-drag></div>
                        <Communication
                            @close-communication="hiddenCommunication"
                        ></Communication>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';

import AppMenu from '@/layout/Menu';
import AppHeader from '@/layout/Header';

import MenuTabs from '@/components/MenuTabs';
import TabsMenu from '@/components/TabsMenu';


import Communication from '@/views/Communication.vue';

import LinearBox from '@/components/LinearBox';

export default {
    name: 'Home',
    components: {
        Communication,
        LinearBox,
        AppMenu,
        AppHeader,
        MenuTabs,
        TabsMenu
    },
    data() {
        return {
            theCommunicationPage: false,
            visible: false,
            tabsList: [
                {
                    name: 'guide',
                    title: '引导页',
                    closable: false
                }
            ],
            activeTab: 'guide'
        };
    },
    computed: {
        ...mapGetters(['getToggle'])
    },
    methods: {
        // 显示聊天框
        showCommunication() {
            this.theCommunicationPage = true;
        },
        hiddenCommunication() {
            this.theCommunicationPage = false;
        },
        goSearchPage() {
            this.$router.push('/search');
        }
    }
};
</script>

<style lang="less" scoped>
@import '~@/assets/css/common.less';

.el-container {
    height: 100%;
    position: relative;
}

.el-aside {
    background-color: @theme-backgroundColor-primary;
    overflow-x: hidden;
}

.el-header {
    padding: 0 1.666667rem;
}

.el-main {
    background-color: #edf2f9;
    padding: 1.666667rem;
}

.home {
    width: 100%;
    height: 100%;
    position: relative;

    .move_box {
        width: 300px;
        height: 150px;
        position: absolute;
        top: 400px;
        right: 400px;
        border: 1px dashed #ccc;
    }
    .icon {
        cursor: pointer;
    }

    .min-window-page {
        position: absolute;
        z-index: 9999;
        top: 12%;
        left: 20%;
        width: 82.37rem;
        height: 60.17rem;
        box-sizing: border-box;
        box-shadow: -2px 5px 10px #ccc;
        overflow: hidden;
        &-headmove {
            height: 2rem;
            width: 100%;
            cursor: pointer;
            background-color: #f0f0f0;
        }
    }
}
</style>
